<template>
  <div>
    <!-- 顶部 -->
    <div>
      <van-nav-bar
        title="发表帖子"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <van-icon name="success" size="22" />
        </template>
      </van-nav-bar>
    </div>

    <div class="publishBox">
      <van-cell-group>
        <!-- 弹出层 -->
        <van-cell is-link @click="showPopup">
          <van-field
            readonly
            clickable
            label="专题:"
            :value="value"
            placeholder="点击选择专题"
            @click="showPicker = true"
        /></van-cell>
        <van-popup
          v-model="showPicker"
          position="bottom"
          :style="{ height: '45%' }"
        >
          <van-picker
            item-hight="500px"
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            @change="onChange"
          />
        </van-popup>

        <van-field v-model="title" label="标题:" placeholder="请输入标题" />
        <span class="centerContent" style="font-size: 17px; color: #646566"
          >内容：</span
        >
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="1000"
          placeholder="请输入内容"
          show-word-limit
          class="insertContent"
        />
      </van-cell-group>

      <!-- <van-uploader :after-read="afterRead" /> -->
    </div>
    <!-- 选择图片 -->
    <van-uploader v-model="fileList" :after-read="afterRead">
      <!-- <img :src="upfile.name" alt=""> -->
    </van-uploader>
  </div>
</template>

<script>
import { Toast } from "vant";
import { categoryList, modifyPic, createPost } from "../api/api";
export default {
  name: "PublishContent",
  data() {
    return {
      value: "",
      showPicker: false,
      project: "",
      message: "",
      title: "",
      content: "",
      columns: [],
      picUrl: "",
      fileList: [],
      categoryId: "",
      categoryList: {},
      // picUrl:"",
    };
  },
  created() {},
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      console.log(file.file.name);
      modifyPic(file.file).then((res) => {
        console.log(res);
        this.picUrl = res.url;
      });
    },

    // 点击选择相应的专题
    showPopup() {
      this.show = true;
      categoryList().then((res) => {
        console.log(res);
        this.categoryList = res.rows;
        for (let i = 0; i < res.total; i++) {
          if(res.rows[i].name!="美妆"&&res.rows[i].name!="桌游") {
            this.columns.push(res.rows[i].name);
          }
          
            // console.log(this.categoryId);

          // 获取相应的专题列表
          if (res.rows[i].categoryId) {
            this.categoryId = res.rows[i].categoryId;
            console.log(this.categoryId);
          }
        }
      });
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      Toast("取消");
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onClickLeft() {
      window.history.go(-1);
    },
    onClickRight() {
      createPost(this.categoryId, this.title, this.message, this.picUrl).then(
        (res) => {
          if (res.code == 0) {  
            console.log(res);
            Toast("发表成功");
            console.log(this.categoryId);
            this.$router.push({
              path: "/index",
            });
          }else {
            Toast("请去登录")
          }
        }
      );
    },
  },
};
</script>

<style scoped  lang="less">
/deep/.van-popup .van-popup--bottom {
  height: 59%;
  z-index: 2006;
}
.van-cell__value--alone {
  color: #646566;
}
/deep/.van-cell {
  font-size: 17px;
}
.van-cell--clickable {
  margin-left: -8px;
  height: 58px;
}
// /deep/.van-icon {
//   margin-top: 10px;
// }
// 顶部
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
.publishBox {
  margin: auto;
  width: 100%;
}
/deep/.van-cell__title {
  width: 3.2em;
}
.van-cell__right-icon {
  margin-top: 10px;
}

/deep/.van-cell__title span {
  font-size: 17px;
}
/deep/.centerContent {
  display: block;
  padding: 3%;
  margin: auto;
  width: 92%;
  text-align: left;
  font-size: 20px;
  color: rgb(100, 98, 98);
}
.insertContent {
  height: 200px;
}
/deep/.van-uploader__upload {
  float: left;
  width: 80px;
  height: 80px;
  // margin-top: 30%;
  // margin-left: 14px;
}
/deep/.van-field__word-limit {
  margin-top: 115px;
}
</style>
